<script setup>
import { ref , reactive} from 'vue';
import { ElMessageBox } from 'element-plus';
import axios from '@/axios';


//初始化
axios.get("/user/getUserList").then(res => {
    res.data.forEach(item => {
        tableData.push(item)
    });
})


//变量
const tableData = reactive([])
const dialogVisible = ref(false)


//函数
const update = () => {
    ElMessageBox.confirm('确认提交？\n',{confirmButtonText: '确认',cancelButtonText: '关闭',center: true})
    .then(() => {
        dialogVisible.value = false
        console.log(dialogVisible);
        console.log("提交")
    })
    .catch((e) => {
        console.log(e);
        console.log("取消提交")
    })
}

const delete_user = () => {
    ElMessageBox.confirm('',' \n 是否删除？',{confirmButtonText: '确认',cancelButtonText: '关闭',center: true})
    .then(() => {
        console.log("删除")
    })
    .catch((e) => {
        console.log(e);
        console.log("取消删除")
    })
}
const edit_user = (index) => {
    console.log(index);
    dialogVisible.value = true
}
</script>
<template>
    <div class="index">
        <el-table :data="tableData" style="width: 100% ;height: 100%;">
            <el-table-column type="index" label="序号" width="60"/>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="tel" label="手机号" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #="scope">
                    <el-button link type="primary" size="small" @click="edit_user(scope.row)">编辑</el-button>
                    <el-button link type="danger" size="small" @click="delete_user">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="dialogVisible" title="编辑" width="30%" draggable close-on-press-escape>
        <span>This is a message</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" >关闭</el-button>
                <el-button type="primary" @click="update">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped>
.index {
    text-align: center;
    /* background-color: #ff0000; */
    height: 100%;
}
</style>